/** * 财务管理-发票管理 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">财务管理</el-breadcrumb-item>
      <el-breadcrumb-item>发票管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search" align="left">
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
        <el-button size="small" type="danger" @click="batchDel()">批量删除</el-button>
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input size="small" v-model="formInline.order_num" placeholder="订单号" class="searchInput"/>
        <el-input size="small" v-model="formInline.invoice_num" placeholder="发票号" class="searchInput"/>
        <el-input size="small" v-model="formInline.merchants_name" placeholder="客户名称" class="searchInput"/>
        <el-date-picker v-model="searchTime" type="daterange" value-format="yyyy-MM-dd" :default-value="timeDefaultShow"
        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="timePicker"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getdata()">搜索</el-button>
        <el-button size="small" type="danger" @click="clearConditon()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border :row-key="getRowKeys" ref="multipleSelectable"
    @selection-change="handleSelectionChange" style="width: 100%" @sort-change="sortChange">
      <el-table-column align="center" type="selection" width="40" :reserve-selection="true"/>
      <el-table-column align="center" prop="id" label="序号" width="50"/>
      <el-table-column align="center" prop="order_num" label="订单号" width="100"/>
      <el-table-column align="center" prop="invoice_num" label="发票号" width="100"/>
      <el-table-column align="center" prop="tax_num" label="税号" width="100"/>
      <el-table-column align="center" prop="merchants_name" label="客户名称" width="150"/>
      <el-table-column align="center" prop="amount" label="金额" width="100"/>
      <el-table-column align="center" prop="bill_time" label="开具时间" width="100" sortable="custom"/>
      <el-table-column align="center" prop="notes" label="备注" width="100"/>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteOne(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather" align="center"/>
    <!-- 新增、编辑页面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="55%" :before-close="closeDialog">
      <el-form :inline="true" label-width="100px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="订单号" prop="order_num">
          <el-input size="small" v-model="editForm.order_num" placeholder="请点击选择"
          :disabled="true" @click.native="showOrder()"/>
        </el-form-item>
        <el-form-item label="发票号" prop="invoice_num" >
          <el-input size="small" v-model="editForm.invoice_num" placeholder="示例：SCFP01"/>
        </el-form-item>
        <el-form-item label="税号" prop="tax_num" >
          <el-input size="small" v-model="editForm.tax_num" placeholder="示例：SCSW01"/>
        </el-form-item>
        <el-form-item label="客户名称" prop="merchants_name">
          <el-input size="small" v-model="editForm.merchants_name" :disabled="true" placeholder="由订单确定"/>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input size="small" v-model="editForm.amount" :disabled="true" placeholder="由订单确定"/>
        </el-form-item>
        <el-form-item label="开具时间" prop="bill_time">
          <el-date-picker v-model="editForm.bill_time" type="date" value-format="yyyy-MM-dd"
          placeholder="选择日期" style="width:193px" :picker-options="pickerOptions"/>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input size="small" v-model="editForm.notes"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="small" @click="cancelDialog">取消</el-button>
        <el-button size="small" type="primary" class="title"
          @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 弹出的订单列表 -->
    <el-dialog :visible.sync="orderListVisible" width="80%" @click="closeList()">
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline2" class="user-search" align="left">
      <el-form-item label="搜索:">
        <el-input size="small" v-model="formInline2.order_num" placeholder="订单号" class="searchInput"/>
        <el-input size="small" v-model="formInline2.order_client" placeholder="客户名称" class="searchInput"/>
        <el-input size="small" v-model="formInline2.product_name" placeholder="商品名称" class="searchInput"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="showOrder()">搜索</el-button>
        <el-button size="small" type="danger" @click="clearConditon2()">重置</el-button>
      </el-form-item>
    </el-form>
      <el-table size="small" :data="orderData" highlight-current-row border style="width: 100%">
        <el-table-column  prop="order_num" align="center" label="订单号" width="100"/>
        <el-table-column  prop="order_client" align="center" label="订单客户" width="100"/>
        <el-table-column  prop="order_contract" align="center" label="合同编号" width="100"/>
        <el-table-column  prop="material_code" align="center" label="产品编号" width="100"/>
        <el-table-column  prop="product_name" align="center" label="产品名称" width="150"/>
        <el-table-column  prop="product_type" align="center" label="产品类型" width="100"/>
        <el-table-column  prop="order_account" align="center" label="商品数" width="100"/>
        <el-table-column  prop="total_money" align="center" label="总金额" width="100"/>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="chooseOrder(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件2 -->
      <Pagination :child-msg="pageparm2" @callFather="callFather2" align="center"/>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      // 控制编辑页面显示与隐藏
      editFormVisible: false, 
      // 控制订单列表显示与隐藏
      orderListVisible:false,
      // 新增、编辑页面的标题
      title: "添加",
      // 编辑页面数据
      editForm: {
        id: "",
        order_num: "",
        invoice_num: "",
        tax_num: "",
        merchants_name: "",
        amount: "",
        bill_time: "",
        notes: "",
      },
      // 验证规则
      rules: {
        order_num: [
          {required: true,message: '请选择订单', trigger: 'blur'},
        ],
        invoice_num: [
          {required: true, message: '请输入发票号', trigger: 'blur' },
          {min: 1, max: 20, message: '请输入1~20个字符', trigger: 'blur' }
        ],
        tax_num: [
          {required: true, message: '请输入税号', trigger: 'blur' },
          {min: 1, max: 20, message: '请输入1~20个字符', trigger: 'blur' }
        ],
        bill_time: [
          {required: true, message: '请选择开具时间', trigger: 'blur' }
        ]
      },
      // 搜索框时间
      searchTime:["",""],
      // 显示时间范围
      timeDefaultShow:"",
      // 搜索框数据
      formInline: {
        order_num: "",
        invoice_num: "",
        merchants_name: "",
        startTime:"",
        endTime:"",
      },
      formInline2: {
        order_num: "",
        order_client: "",
        product_name: "",
      },
      // 表单数据
      listData: [], 
      // 订单数据
      orderData: [],
      // 表单选择数组
      multipleSelection: [],
      // 初始化分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      pageparm2: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      // 时间插件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      // 排序字段
      orderSort:"",
      orderKey:"",
    };
  },
  // 注册组件
  components: {Pagination},

  //创建完毕
  created() {
    // 设置显示时间范围
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
    // 获取传参
    this.formInline.merchants_name=this.$route.query.merchants_name;
    // 获取表单数据
    this.getdata();
  },

  // 定义方法
  methods: {
    // 清空搜索条件
    clearConditon(){
      this.searchTime=["",""];
      this.formInline.order_num= "";
      this.formInline.invoice_num= "";
      this.formInline.merchants_name= "";
      this.getdata();
    },
    // 获取表单数据
    getdata() {
      this.formInline.startTime=this.searchTime[0];
      this.formInline.endTime=this.searchTime[1];
      let queryEntity={
        currentPage:this.pageparm.currentPage,
        pageSize:this.pageparm.pageSize,
        entity:this.formInline,
        orderSort:this.orderSort,
        orderKey:this.orderKey
      };
      this.$axios.post("/api/invoice/condition",queryEntity)
      .then((res) => {
          if (res.data.code == 200) {
              this.listData = res.data.data.list;
              //对总数量进行赋值
              this.pageparm.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata();
    },
    callFather2(parm) {
      this.pageparm2.currentPage = parm.currentPage;
      this.pageparm2.pageSize = parm.pageSize;
      this.showOrder();
    },
    // 排序方法
    sortChange(column) {
        if (column.order == "ascending") {
          this.orderSort = 'asc'
        } else if (column.order == "descending") {
          this.orderSort = 'desc'
        } else {
          this.orderSort = ''
        }
        this.orderKey=column.prop;
        this.getdata();
      },
    //显示新增、编辑界面
    handleEdit: function (obj) {
      this.editFormVisible = true;
      if (obj != undefined && obj != "undefined") {
        this.title = "修改";
        //填充数据
        this.editForm.id = obj.id;
        this.editForm.order_num = obj.order_num;
        this.editForm.invoice_num = obj.invoice_num;
        this.editForm.tax_num = obj.tax_num;
        this.editForm.merchants_name = obj.merchants_name;
        this.editForm.amount = obj.amount;
        this.editForm.bill_time = obj.bill_time;
        this.editForm.notes = obj.notes;
      } else {
        this.title = "添加";
        //清空数据
        this.editForm.id = "";
        this.editForm.order_num = "";
        this.editForm.invoice_num = "";
        this.editForm.tax_num = "";
        this.editForm.merchants_name = "";
        this.editForm.amount = "";
        this.editForm.bill_time = new Date().format('yyyy-MM-dd');
        this.editForm.notes = "";
      }
    },
    clearConditon2(){
      this.formInline2.order_num= "";
      this.formInline2.order_client= "";
      this.formInline2.product_name= "";
      this.showOrder();
    },
    // 显示订单列表
    showOrder(){
      this.orderListVisible = true;
      let queryEntity={
        currentPage:this.pageparm2.currentPage,
        pageSize:this.pageparm2.pageSize,
        entity:this.formInline2,
      };
      //加载数据
      this.$axios.post("/api/invoice/showOrder",queryEntity)
      .then((res) => {
          if (res.data.code == 200) {
              this.orderData = res.data.data.list;
              //对总数量进行赋值
              this.pageparm2.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      });
    },
    // 选择订单
    chooseOrder(obj){
      this.orderListVisible = false;
      // 填充数据
      this.editForm.order_num = obj.order_num;
      this.editForm.merchants_name = obj.order_client;
      this.editForm.amount = obj.total_money;
    },
    // 编辑、增加页面保存方法
    submitForm() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("请按要求填写表单！");
        }else{
          // 判断是修改还是新增
          if (this.editForm.id == "") {
            // 新增
            this.$axios.post("/api/invoice/invoice", this.editForm)
            .then((res) => {
                //关闭弹窗
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                if (res.data.code == 200) {
                    //刷新数据
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "保存成功！",
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: res.data.message,
                    });
                }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.$message.error(err.response.data.message);
            });
          } else {
            // 修改
            this.$axios.put("/api/invoice/invoice", this.editForm)
            .then((res) => {
                //关闭弹窗
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                if (res.data.code == 200) {
                    //刷新数据
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "保存成功！",
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: res.data.message,
                    });
                }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.$message.error("保存失败，请稍后再试！");
            });
          }
        }
      });
    },
    // 删除一个
    deleteOne(obj) {
        this.$confirm("确定要删除吗?", "信息", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            this.$axios.delete("/api/invoice/invoice/"+obj.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "已删除!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.data.message,
                });
              }
            })
            .catch((err) => {
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    batchDel() {
        if(this.multipleSelection.length==0){
            this.$message({
                type: "info",
                message: "请先勾选需要删除的列",
            });
            return;
        }
        this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        })
        .then(() => {
            this.$axios.put("/api/invoice/invoice/batchDel",this.multipleSelection)
            .then((res) => {
              this.$refs.multipleSelectable.clearSelection();
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "已删除!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.data.message,
                });
              }
            })
            .catch((err) => {
              this.$refs.multipleSelectable.clearSelection();
              this.$message.error(err.response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    cancelDialog() {
      this.$refs["editForm"].resetFields();
      this.editFormVisible = false;
    },
    // 关闭前清空验证信息
    closeDialog(done){
      this.$refs["editForm"].resetFields();
      done();
    },
    // 关闭订单列表弹出框
    closeList() {
      this.orderListVisible = false;
    },
    // 处理表单多选
    handleSelectionChange(val) {
        this.multipleSelection=[];
        for(let index in val){
            this.multipleSelection[index]=val[index].id;
        }
    },
    getRowKeys(row) {
      return row.id;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.searchInput{
  width: 100px;
}
.timePicker{
  width: 230px;
}
</style>
